<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="foodName"
              size="medium"
              placeholder="查询用户"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="success"
              @click="production"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              @click="newest(1)"
              icon="el-icon-circle-plus-outline"
              >新建</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          border
          :default-expand-all="false"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="ID"> </el-table-column>
          <el-table-column prop="menuName" label="菜单名称" align="center">
          </el-table-column>
          <el-table-column prop="address" label="类型" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.address == 1">目录</el-tag>
              <el-tag type="success" v-else>菜单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="route" label="路径" align="center">
          </el-table-column>
          <el-table-column prop="icon" label="图标" align="center">
          </el-table-column>
          <el-table-column prop="isNoButton" label="排序" align="center">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名" align="center">
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                size="mini"
                type="primary"
                @click="editorPara(scope.row, 2)"
                >修改</el-button
              >
              <el-button size="mini" type="danger" @click="deleted(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagingClass">
          <el-pagination
            :page-sizes="m_page.sizes"
            :page-size="m_page.size"
            :current-page="m_page.number"
            @size-change="m_handleSizeChange"
            @current-change="m_handlePageChange"
            layout="total,sizes,prev, pager, next"
            background
            :total="m_page.totalElements"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="single"
      v-model="plassets"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuname" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="form.define" :label="1">目录</el-radio>
          <el-radio v-model="form.define" :label="2">菜单</el-radio>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select
            v-model="uperior"
            placeholder="请选择上级菜单"
            style="width: 300px"
          >
            <el-option
              v-for="item in inspector"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.iconsActive" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="form.parsePath" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sorting" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="文件名">
          <el-input v-model="form.filename" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-else type="primary"
            >编辑 确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//菜单 目录
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      foodName: "",
      plassets: false,
      single: "添加菜单",
      under: 1,
      form: {
        menuname: "",
        define: "",
        iconsActive: "",
        parsePath: "",
        sorting: "",
        filename: "",
      },
      uperior: "",
      inspector: [], //上级菜单
      tableData: [
        // {
        //   id: 3,
        //   name: "行政管理",
        //   address: "1",
        //   address1: "/",
        //   location: 1,
        //   address2: "",
        //   children: [
        //     {
        //       id: 4,
        //       name: "文档",
        //       address: "2",
        //       address1: "../views/administrative/template.vue",
        //       location: 2,
        //       address2: "",
        //       children: [
        //         {
        //           id: 2 - 1,
        //           name: "测试文档",
        //           address: "2",
        //           address1: "../views/administrative/template.vue",
        //           location: 2,
        //           address2: "",
        //         },
        //       ],
        //     },
        //     {
        //       id: 5,
        //       name: "报销",
        //       address: "2",
        //       location: 3,
        //       address1: "../views/administrative/expense.vue",
        //       address2: "",
        //     },
        //   ],
        // },
      ],
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 20,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.menu_order();
  },
  methods: {
    newest(index) {
      this.plassets = true;
      this.under = index;
    },
    //保存确定
    determine() {
      console.log(123);
      this.$axios
        .post(
          `api/serial/Menu`,
          {
            // menuName: this.form.menuname, //菜单名称
            // type: this.form.define, //类型
            // superiorMenu: -1, //上级菜单
            // route: this.form.parsePath, //路径
            // fileName: this.form.filename, //文件名
            // isNoButton: this.form.sorting, //排序
            // icon: this.form.iconsActive,
            menuName: this.form.menuname,
            type: this.form.define,
            superiorMenu: -1,
            route: this.form.parsePath,
            fileName: this.form.filename,
            icon: this.form.iconsActive,
            isNoButton: parseInt(this.form.sorting),
            xz: 0,
            sc: 0,
            xg: 0,
            ck: 0,
            dy: 0,
            roleId: 0,
            sort: 0,
            isDelete: 0,
            id: 0,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then((res) => {
          console.log(res);
          ElMessage({
            showClose: true,
            message: "保存成功",
            type: "success",
          });
          this.plassets = false;
          this.menu_order();
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    //删除
    deleted(row) {
      let into = row;
      console.log(into);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/Menu`,
              {
                menuName: into.menuname,
                type: into.type,
                superiorMenu: into.superiorMenu,
                route: into.route,
                fileName: into.filename,
                icon: into.icon,
                isNoButton: into.isNoButton,
                xz: 0,
                sc: 0,
                xg: 0,
                ck: 0,
                dy: 0,
                roleId: 0,
                sort: 0,
                isDelete: 1,
                id: into.id,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              // console.log(res);
              this.menu_order();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取菜单
    menu_order() {
      this.$axios({
        methods: "GET",
        url: "api/serial/Menu",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          query: {},
        },
      }).then((res) => {
        // console.log(res);
        this.tableData = res.data.data;
        this.m_page.totalElements = res.data.count;
      });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.menu_order();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.menu_order();
    },
  },
};
</script>

<style scoped>
.addccc {
  margin-bottom: 10px;
  margin-left: 10px;
}
.pagingClass {
  text-align: right;
  height: 40px;
  background-color: #fff;
  margin-bottom: 40px;
}
</style>